<template>
	<div class="popUpBox-warpper">
		<div class="popUpBox">
			<div class="height">
				提示
			</div>
			<div class="content">
				{{popHeight}}
			</div>
			<div class="btn-warpper">
				<button class="btn-confirm" @click="confirm">确定</button>
				<button class="btn-cancel" @click="cancel">取消</button>
			</div>
		</div>
	</div>
</template>
<script>
export default {
	props: {
		popHeight: String
	},
	methods: {
		confirm () {
			this.$emit('isconfirm')
		},
		cancel () {
			this.$emit('iscancel')
		}
	}
}
</script>
<style lang="stylus" scoped>
	.popUpBox-warpper
		z-index: 10
		position: absolute
		top: 0
		left: 0
		bottom: 0
		width: 100%
		text-align: center
		background: rgba(0, 0, 0, .5)
		.popUpBox
			margin-top: 50%
			display: inline-block
			height: 2.3rem
			width: 60%
			background: #fff
			border-radius: .2rem
			.height
				height: .66rem
				line-height: .66rem
				text-align: center
				background: #20d9bb
				font-size: .32rem
				color: #fff
				border-radius: .2rem .2rem 0 0
			.content
				height: .4rem
				line-height: .4rem
				margin-top: .2rem
			.btn-warpper
				height: 1.2rem
				line-height: 1.2rem
				text-align: center
				.btn-confirm, .btn-cancel
					height: 50%
					width: 42%
					font-size: .26rem
					color: #fff
					border-radius: .06rem
				.btn-confirm
					background: #67C23A
				.btn-cancel
					margin-left: .2rem
					background: red

</style>
